<template>
  <div class="details-container app-container" v-loading="listLoading">
    <div class="detail-title">
      <div>新闻详情</div>
      <el-button type="primary" size="small" @click="onEdit">编辑</el-button>
    </div>
    <div class="detail-content">
      <h1>{{ data.mid_table_remark_001 || "" }}</h1>
      <div class="detail-head">
        <el-avatar :size="50" :src="data.mid_table_remark_002"></el-avatar>
        <div class="head-name">
          <div>{{ data.mid_table_remark_005 || '' }}</div>
          <div>{{ data.mid_table_remark_004 || "" }}</div>
        </div>
      </div>
      <div class="new-info">
        <div v-html="data.mid_table_remark_008 || ''"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsDetail } from "@/api/news";
import {  decode } from 'js-base64';

export default {
  name: "NewsDetail",
  data() {
    return {
      listLoading: true,
      detailQuery: {
        invoke_method: 'public_load_middle_table_list',
        pre_db_para_middle_table_name: 'public_middle_table_lite_mod_news_msg',
        type_middle_app: '10001',
        type_inner_app: '1001',
        is_online: '0',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        id_public_middle_table: null,
      },
      data: {},
    };
  },
  async mounted() {
    const id = this.$route.query.id || null;
    this.detailQuery.id_public_middle_table = id;
    if (id) {
      const content = await getNewsDetail(this.Qs.stringify(this.detailQuery)).then(res => {
        if (res.page_content?.length > 0) {
          return res.page_content[0]
        }
        return false
      });
      if (content) {
        this.data = {
          mid_table_remark_001: content.mid_table_remark_001,
          mid_table_remark_002: content.mid_table_remark_002,
          mid_table_remark_004: content.mid_table_remark_004,
          mid_table_remark_005: content.mid_table_remark_005,
          mid_table_remark_008: content.mid_table_remark_008 && decode(content.mid_table_remark_008)
        };
      }
    } else {
      this.$router.go(-1);
    }
    this.listLoading = false;
  },
  methods: {
    onEdit() {
      this.$router.push({
        path: "/newsEdit",
        query: { id: this.detailQuery.id_public_middle_table },
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-title {
  border-bottom: 1px solid #e3e3e3;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-content {
  padding: 24px 24px 0;

  .detail-head {
    display: flex;
    align-items: center;
    .head-name {
      margin-left: 10px;
      color: gray;
      font-size: 13px;
      div {
        margin: 5px 0;
      }
    }
  }

  .new-info {
    width: 100%;
  }
}
</style>